<script setup>
defineProps({
  name: {
    type: String,
    required: true
  },
  location:{
    type: String,
    required: true
  },
  treatment:{
    type: String,
    required: true
  }
})
</script>

<template>
<div class="container">
  <div class="title">{{name}}</div>
  <div class="location">Location: {{location }}</div>
  <div class="treatment">Treatment: {{treatment}}</div>
</div>
</template>

<style scoped>
.container{
  display: flex;
  flex-direction: row;
  min-width: 17.5vw;
  max-width: 17.5vw;
  height: auto;
  justify-content: left;
  align-items: center;
  padding: 0.6vw;
  border: #000 0.2px solid;
  border-radius: 0.8vw;
  background-color: #fff;
  flex-wrap: wrap;
}
.container:hover{
  background-color: #eee;
}
.container .title{
  width:16vw;
  height:2vw;
  font-size:1vw;
}
.container .title h1{
  font-size: 1vw;
}
.container .location{
  width:15vw;
  height: 1.5vw;
  font-size: 0.8vw;
}
.container .location h1{
  font-size: 0.8vw;
}
.container .treatment{
  width:15vw;
  height:auto;
  font-size: 0.8vw;
  display: flex;
  word-break:break-all;
}

</style>